<template>
  <div class="home">
    <home-header></home-header>
    <div class="main">
          <swiper :options="swiperOption" >
            <swiper-slide>
              <classic 
              :swiperList = "swiperList"
              :bookRecommend = "bookRecommend"
              :bookNew = "bookNew"
              ></classic>
            </swiper-slide>
            <swiper-slide>
              <shelve></shelve> 
            </swiper-slide>
        </swiper>
    </div>
    <home-footer :navList="navList"></home-footer>
  </div>
</template>

<script>
import HomeHeader from './components/Header';
import HomeFooter from './components/Footer';
import Classic from './Classic'
import Shelve from './Shelve'
import axios from 'axios'
export default {
  components:{
    HomeHeader,HomeFooter,Classic,Shelve
  },
  methods: {
     getHomeInfo(){
      axios.get("/api/index.json").then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc(res){
      res = res.data
      if(res.ret && res.data){
        const data = res.data;
       this.navList=data.navList;
       this.swiperList = data.swiperList;
       this.bookRecommend = data.bookRecommend;
       this.bookNew = data.bookNew;
      }
      console.log(res);
    }
  },
  data(){
    return{
      swiperOption:{},
      navList:"",
      swiperList:"",
      bookRecommend:"",
      bookNew:""
    }
  },
  mounted(){
    this.getHomeInfo();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .home
    position:absolute
    top:0
    left:0
    bottom:0
    right:0
    .main
      position:absolute
      top:1rem
      width :100%
      bottom:1rem
      .swiper-container
        height:100%
</style>